<template>
  <div class="mypay">
    <TopBack title="支付页面"></TopBack>
    <!-- 支付倒计时 -->
    <div class="deadline clearfix">
      <span>剩余时间：</span>
      <van-count-down :time="time" />
    </div>
    <!-- 支付价格 -->
    <div class="price-box">
      <p class="price">
        <span class="fuhao">￥</span><span>{{ money }}</span>
      </p>
      <p class="hotel">
        {{ name }} <a href="#">详情<van-icon name="arrow-down" /></a>
      </p>
    </div>

    <!-- 银行卡支付 -->
    <div class="cardPay">
      <p class="title">
        <img src="../../assets/image/pay/hotel.png" alt="" />
        <span>银行卡支付</span>
      </p>
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell
            title="使用新卡支付（立减1-30元）"
            clickable
            @click="radio = '1'"
          >
            <template #right-icon>
              <van-radio name="1" checked-color="#033E98" />
            </template>
          </van-cell>
          <van-cell
            title="工商银行  储蓄卡（本单立减5元）"
            clickable
            @click="radio = '2'"
          >
            <template #right-icon>
              <van-radio name="2" checked-color="#033E98" />
            </template>
          </van-cell>
          <van-cell
            title="工商银行  信用卡（3-88元随机立减）"
            clickable
            @click="radio = '3'"
          >
            <template #right-icon>
              <van-radio name="3" checked-color="#033E98" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <p class="more">
        <a href="#"> 绑卡支付，查看更多活动<van-icon name="arrow" /></a>
      </p>
    </div>

    <!-- 其他支付方式 -->
    <div class="otherPay">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <img class="yun" src="../../assets/image/pay/yun.png" alt="" />

          <van-cell
            class="yun-box"
            title="云闪付（满减最高99元）"
            clickable
            @click="radio = '4'"
          >
            <img
              class="yunCard"
              src="../../assets/image/pay/yunCard.png"
              alt=""
            />
            <template #right-icon>
              <van-radio name="4" checked-color="#033E98" />
            </template>
          </van-cell>
          <img class="weixin" src="../../assets/image/pay/weixin.png" alt="" />
          <van-cell class="wz" title="微信" clickable @click="radio = '5'">
            <template #right-icon>
              <van-radio name="5" checked-color="#033E98" />
            </template>
          </van-cell>
          <img
            class="zhifubao"
            src="../../assets/image/pay/zhifubao.png"
            alt=""
          />
          <van-cell class="wz" title="支付宝" clickable @click="radio = '6'">
            <template #right-icon>
              <van-radio name="6" checked-color="#033E98" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <!-- 支付按钮 -->
    <van-button
      round
      block
      native-type="submit"
      color="#033E98"
      @click="xiangqing"
      >支付</van-button
    >
  </div>
</template>

<script>
import TopBack from "../../components/TopBack";
import { getAllProductList } from "../../api/hotelApi.js";
import{addOrder} from '../../api/orderApi.js'
export default {
  components: { TopBack },
  data() {
    return {
      time: 30 * 60 * 1000,
      radio: "5",
      hotelId: "",
      hotel: [],
      name: "",
      roomId: "",
      username: "",
      usertel: "",
      money: "",
      data: {},
    };
  },
  created() {
    // console.log(this.$route.query);
    this.hotelId = this.$route.query.hotelId;
    this.roomId = this.$route.query.roomId;
    this.username = this.$route.query.username;
    this.usertel = this.$route.query.usertel;
    this.money = this.$route.query.money;
  },
  mounted() {
    getAllProductList().then((res) => {
      this.hotel = res.data;
      // console.log(this.hotel);
      this.hotel = this.hotel.filter((item) => {
        return item.hotelId == this.hotelId;
      });
      this.name = this.hotel[0].name;
    });
  },
  methods: {
    xiangqing() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let thisTime = `${year}-${month}-${day} ${hour}:${minute}`;
      var start = this.$route.query.start;
      var end = this.$route.query.end;
      var sum = this.$route.query.sum;
      // var shuju = (1)
      this.$dialog
        .confirm({
          title: "去付款",
          message: "确认支付吗？",
        })
        .then(() => {
          this.$toast({
            message: '支付成功',
            position: 'top',
          });
          this.$router.push({
            path: "/particluars",
            query: {
              hotelId: this.hotelId,
              roomId: this.roomId,
              username: this.username,
              usertel: this.usertel,
              money: this.money,
              thisTime: thisTime,
              start:start,
              end:start,
              sum:sum,
              tuikuan: false,
              payOrno:true,
            },
          });
          let shuju2=parseInt(Math.random()*100)
        // 添加订单
        let order={
           hotelId: this.hotelId,
              roomId: this.roomId,
              start:start,
              end:end,
              sum:sum,
              userName: this.username,
              orderId:shuju2
        }
    addOrder({userOrder:order}).then(res=>{
  console.log("成功", res);
    })
       })
        .catch(() => {
          let cartPro = {
        hotelId: this.hotelId,
        roomId: this.roomId,
        username: this.username,
        usertel: this.usertel,
        money: this.money,
        thisTime: thisTime,
        start: start,
        end:end,
        sum:sum,
        payOrno: false,
        tuikuan: false
      };
      this.$store.commit("addCart", cartPro);
          this.$router.push({
            path: "/botnav/order",
          });
          // console.log(11);
        });
    },
   
  },
};
</script>

<style lang="less" scoped>
.mypay {
  height: 100%;
  background-color: #f5f6f8;
}
.deadline {
  width: 100%;
  margin-bottom: 10px;
  span {
    margin-left: 35%;
    font-size: 14px;
    float: left;
  }
  .van-count-down {
    float: left;
    color: #033e98;
  }
}
.price-box {
  text-align: center;
  .price {
    font-size: 35px;
    margin: 0;
    .fuhao {
      font-size: 25px;
    }
    span {
      font-weight: bold;
    }
  }
  .hotel {
    font-size: 12px;
    a {
      margin-left: 5px;
      color: #033e98;
    }
    .van-icon {
      color: #033e98;
    }
  }
}
.cardPay {
  font-size: 16px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin: 0 10px;
  font-weight: 500;
  .title {
    margin: 6px;
    margin-left: -6px;
    img {
      width: 40px;
      height: 40px;
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
      font-weight: 800;
      margin-left: 10px;
    }
  }
  .van-cell {
    height: 46px;
  }
}
.van-cell-group {
  margin-left: 28px;
}
.more {
  margin-left: 44px;
  margin-bottom: 0;
  a {
    font-size: 12px;
    color: #838383;
  }
}
.otherPay {
  font-size: 16px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  font-weight: 500;
  .van-cell-group {
    position: relative;
    .yun {
      position: absolute;
      left: -30px;
      top: 10px;
      width: 30px;
      height: 30px;
    }
    .yunCard {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 20px;
      height: 20px;
    }
    .weixin {
      position: absolute;
      left: -30px;
      top: 60px;
      width: 30px;
      height: 30px;
    }
    .van-cell {
      height: 56px;
    }
    .wz {
      height: 40px;
    }
    .zhifubao {
      position: absolute;
      left: -30px;
      top: 105px;
      width: 30px;
      height: 30px;
    }
  }
}
.yun-box {
  position: relative;
}
.van-button {
  width: 95%;
  margin: 10px;
}
</style>
